<script setup>
import { reactive, ref, toRefs } from 'vue'
const obj=reactive({message:'torefs的值',num:'1'})
const input1=ref('')
const isbuttondisabled=ref(false)
const handleclisk=()=>{
    if(input1.value.trim()===''){
        isbuttondisabled.value=true
        alert('请输入有效的内容')
    }else{
        isbuttondisabled.value=false
        console.log('你输入的内容是:', input1.value);
    }
}
</script>

<template>
    <!-- 数据绑定：v-model -->
 <div>
  <h1>数据绑定：v-model</h1>
    <input v-model="input1" placeholder="输入内容" style="color: brown;">
    <h3>你输入的内容是:{{ input1 }}</h3>
    <button v-bind:disable="isbuttondisabled" v-on:click="handleclisk">点我</button>
 </div>
</template>

<style scoped>
h1{color: blue;}
h2{
    color: aquamarine;
}
.read-the-docs {
  color: #888;
}
</style>
